<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css">
    <style type="text/css"></style> -->
    <script type="text/javascript" src="js/tools.js"></script>
    <title>Document</title>
</head>

<body>
    <h1>注册</h1>
    <div class="regist">
        <span class="info"></span>
        <form action="/regist.action" method="POST">
            <input type="text" placeholder="用户名" name="registname" class="registname"><span
                class="username-info"></span><br>
            <input type="text" placeholder="密码" name="registpwd" class="registpwd"><br>
            <input type="submit" value="注册">
        </form>
    </div>

    <script>
        //使用get请求处理的ajax操作,验证用户名是否存在
        /* document.querySelector('.registname').addEventListener('blur',e=>{
            //创建核心实例对象
            const xhr=new XMLHttpRequest()
            //打开
            xhr.open('GET','/exist?username='+e.target.value,true)
            //发送请求
            xhr.send()
            //处理响应
            xhr.onreadystatechange=()=>{
                if(xhr.readyState===4&&xhr.status===200){
                    const data=xhr.responseText
                    document.querySelector('.username-info').innerHTML=data
                }
            }
        }) */
        //使用post请求处理的ajax操作,验证用户名是否存在
        $('.registname').addEventListener('blur', e => {
            const xhr = new XMLHttpRequest()
            xhr.open('POST', '/exist', true)
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send('username=' + e.target.value)
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const data = xhr.responseText
                    document.querySelector('.username-info').innerHTML = data
                }
            }
        })
    </script>
</body>

</html>